<template>
    <div class="card_analysis">
        <header>储值卡分析</header>
        <div class="contents">
            <div class="conditions">
                <div class="condition_1">
                    <div class="reason">
                        <span>变动原因：</span>
                        <el-select clearable v-model="value1" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                    <div class="sel_date">
                        <span>选择日期：</span>
                        <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions1" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
                    </div>
                    <el-button type="danger" style="background:#e7251a;" @click.native="querys">查询</el-button>
                    <el-button @click.native="resets">重置</el-button>
                </div>
            </div>
            <div class="tables">
                <el-table v-loading="loading" :data="actList" style="width: 100%;">
                    <el-table-column label="排序" type="index" width="50"> </el-table-column>
                    <el-table-column prop="PHONE" label="手机号/储值卡卡号" width="250"> </el-table-column>
                    <el-table-column prop="TIME" label="变动时间" width="280"> 
                    	<template slot-scope="scope">
                            <span v-if="scope.row.TIME">{{ scope.row.TIME | filterTimess }}</span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="RECORDTYPE" label="变动原因" width="200">
                        <template slot-scope="scope"> 
                        	<span v-if="scope.row.RECORDTYPE==2">充值</span>
                        	<span v-else-if="scope.row.RECORDTYPE==4">消费</span>
                        	<span v-else-if="scope.row.RECORDTYPE==9">充值送</span>
                        	<span v-else>其它</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="AMOUNT" label="变动金额" width="200">
                        <template slot-scope="scope">
                            <span v-if="scope.row.AMOUNT>=0">+￥{{scope.row.AMOUNT|twoD}}</span>
                            <span v-else>-￥{{scope.row.AMOUNT|twoD}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="BALANCE" label="变动后余额" width="220">
                        <template slot-scope="scope">{{scope.row.BALANCE}}</template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[6,8,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.COUNT"> </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import dateSelect from '@/assets/js/date_time_picker.js' //日期选择器数据封装
    export default {
        name: 'card_analysis',
        data() {
            return {
                value1: '', //变动原因
                options1: [
                {
                    value: 2,
                    label: '充值'
                },
                {
                    value: 4,
                    label: '消费'
                }, {
                    value: 9,
                    label: '充值送'
                }],
                value2: '', //选择日期
                pickerOptions1: dateSelect,
                loading: true,
                tableDatas: [],
                page: 1, //当前页数
                pageSize: 6, //每页显示的数目
            }
        },
        computed: {
            //请求参数
            objs() {
                if(this.value2 === null) {
                    this.value2 = '';
                }
                let obj = {};
                obj.PAGE_NO = this.page;
                obj.PAGE_SIZE = this.pageSize;
                this.value1 ? obj.RECORD_TYPE = this.value1 : null;
                if(this.value2.length > 0) {
                    obj.STARTTIME = this.value2[0].getTime();
                    obj.ENDTIME = this.value2[1].getTime();
                }
                return obj;
            },
            //分页数据
            actList() {
                if(this.tableDatas.CARDARR) {
                    return this.tableDatas.CARDARR;
                }
            }
        },
        created() {
            this.getList();
        },
        methods: {
            //储值卡记录
            getList() {
                this.loading = true;
                this.$axiosPost('/4SCAFE/OrderStatistics/cardRecordAnalysis.action', this.objs).then(res => {                	
                    if(res.STATUS_CODE === 1) {
                        this.loading = false;
                        this.tableDatas = res;
                    }
                })
            },
            handleSizeChange(val) {
                this.loading = true;
                this.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.page = +val;
                this.getList();
            },
            //查询
            querys() {
                this.getList();
            },
            //重置
            resets() {
                this.value1 = this.value2 = '';
            },
        },
        filters:{
        	//保留2位小数取正数
        	twoD(v){
        		if(Math.abs(v).toFixed(2)){
        			return Math.abs(v).toFixed(2);	
        		}        		
        		return 0;
        	}
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .card_analysis {
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .contents {
            width: 97%;
            margin: 25px auto;
            padding: 25px;
            background: #fff;
            .conditions {
                .condition_1 {
                    display: flex;
                    .sel_date {
                        margin: 0 35px;
                    }
                }
            }
            .tables {
                margin-top: 15px;
                .el-pagination {
                    text-align: center;
                    margin-top: 30px;
                }
            }
        }
    }
</style>